import React from 'react';
import ReactDOM from 'react-dom';

// 函数式组件
//  首字母要大写
//  返回的还是我们的模板
//  第一个组件定义
function Children(props) { // 传参
    let title = <h2>我是副标题 </h2>
    console.log(props);
    let weather = props.weather;
    let isGo = (weather === "下雨")?"不出门":"出门";
    return (
        <div>
            <h1> hello helinyu, 你想搞啥 </h1>
            {title}

            <div>
                是否出门?<br/>
                <span>{isGo} </span>
            </div>
        </div>
    );
}

//  在组件里面还是可以再进行设置组件

//  类组件的定义 ， 这个怎么获取参数？ props?
class HelloWord extends React.Component {
    // 这个怎么传参
    render() {// 直接render的方法
        console.log(this); // 通过当前的类this来获取props 
        return (
            <div>
                <h1>类组件 hello word {this.props.name}</h1>
                <Children weather={this.props.weather}/>
            </div>
        );
    }
}


//  类组件和函数式组件区别？
/*

*/ 

//  传参数， 和vue一样的
ReactDOM.render(<HelloWord weather="搞死人" name="helinyu"/> ,document.querySelector('#root'));